<template>

  <div>
    <data-table
      ref="pagingTable"
      :options="options"
      :list-query="listQuery"
      @multi-actions="handleActions"
    >
      <template #filter-content>
        <el-button v-permission="['exam:review:paper:audit']" type="primary" class="filter-item" size="small" @click="handleAuditAll">全部审阅</el-button>
        <el-button v-permission="['exam:review:paper:settle']" type="warning" class="filter-item" size="small" @click="handleSettleAll">全部出分</el-button>
        <el-input v-model="listQuery.params.examinee" placeholder="考生姓名/账号" class="filter-item" style="width: 200px" size="small" />
        <el-input v-model="listQuery.params.reviewer" placeholder="阅卷人员姓名/账号" class="filter-item" style="width: 200px" size="small" />

        <dic-list-select v-model="listQuery.params.reviewState" title="阅卷状态" dic-code="paper_review_state"/>
        <dic-list-select v-model="listQuery.params.auditState" title="审阅状态" dic-code="review_audit_state"/>
        <dic-list-select v-model="listQuery.params.settleState" title="出分状态" dic-code="review_settle_state"/>
      </template>

      <template #data-columns>

        <el-table-column
          label="试卷ID"
          prop="id"
          show-overflow-tooltip
        />

        <el-table-column
          label="考生姓名"
          prop="examinee_dictText"
          align="center"/>

        <el-table-column
          label="阅卷人员"
          prop="reviewers"
          align="center"
        />

        <el-table-column
          label="阅卷进度"
          align="center"
        >
          <template v-slot="{ row }">
            {{ row.reviewCount }} / {{ row.assignCount }}
          </template>

        </el-table-column>

        <el-table-column
          label="阅卷状态"
          align="center"
        >
          <template v-slot="{ row }">
            {{ row.reviewState_dictText }}
          </template>

        </el-table-column>


        <el-table-column
          label="审阅状态"
          align="center"
        >
          <template v-slot="scope">
            <span v-if="scope.row.auditState===-1">
              --
            </span>
            <span v-else-if="scope.row.auditState===1">
              已审阅
            </span>
            <span v-else-if="scope.row.auditState===2">
              退回阅卷
            </span>
            <span v-else>
              待审阅
            </span>
          </template>

        </el-table-column>
        <el-table-column
          label="审阅人"
          align="center">
          <template v-slot="{ row }">
            <span v-if="row.auditBy">
              {{ row.auditBy_dictText }}
            </span>
            <span v-else>
              --
            </span>
          </template>

        </el-table-column>

        <el-table-column
          label="出分状态"
          align="center"
        >
          <template v-slot="{ row }">
            <span v-if="row.settleState===1">
              已出分
            </span>
            <span v-else>
              待出分
            </span>
          </template>

        </el-table-column>

        <el-table-column
          label="操作"
          fixed="right"
          align="center"
          width="220px"
        >
          <template v-slot="{ row }">
            <el-link icon="el-icon-copy-document" type="primary" style="margin-right: 10px" @click="showReviewers(row)">阅卷明细</el-link>
            <el-link v-permission="['exam:review:paper:audit']" icon="el-icon-finished" type="danger" style="margin-right: 10px" @click="showDetail(row)">审阅&改分</el-link>
          </template>
        </el-table-column>
      </template>
    </data-table>


    <match-dialog
      :visible.sync="dialogVisible"
      :exam-id="listQuery.params.examId"
      :settle-state="settleState"
      :paper-id="paperId"/>

    <!-- 审阅 -->
    <review-audit-dialog
      :visible.sync="auditVisible"
      :ids="postForm.paperIds"
      :exam-id="postForm.examId"
      @close="reloadGrid"/>

    <!-- 结算窗口 -->
    <review-settle-dialog
      :visible.sync="settleVisible"
      :ids="postForm.paperIds"
      :exam-id="postForm.examId"
      @close="reloadGrid"/>


  </div>
</template>

<script>

import MatchDialog from './components/MatchDialog.vue'
import ReviewAuditDialog from '@/views/admin/exam/review/components/ReviewAuditDialog.vue'
import ReviewSettleDialog from '@/views/admin/exam/review/components/ReviewSettleDialog.vue'
import DicListSelect from '@/components/DicListSelect/index.vue'
import permission from '@/directive/permission'

export default {
  directives: { permission },
  components: { DicListSelect, ReviewSettleDialog, ReviewAuditDialog, MatchDialog },
  data() {
    return {

      listQuery: {
        current: 1,
        size: 10,
        params: {
          examId: '',
          examinee: '',
          reviewer: '',
          reviewState: '',
          auditState: '',
          settleState: ''
        }
      },

      options: {
        // 可批量操作
        multi: true,
        // 列表请求URL
        listUrl: '/api/exam/review/match/paper/paging',
        // 批量操作列表
        multiActions: [
          {
            value: 'audit',
            label: '审阅',
            permission: 'exam:review:paper:audit'
          },
          {
            value: 'settle',
            label: '出分',
            permission: 'exam:review:paper:settle'
          }
        ]
      },
      dialogVisible: false,
      paperId: null,
      settleState: null,

      postForm: {
        examId: '',
        paperIds: []
      },
      // 审阅
      auditVisible: false,
      // 结算
      settleVisible: false
    }
  },
  created() {
    this.listQuery.params.examId = this.$route.query.examId
  },

  methods: {

    // 查看阅卷情况
    showReviewers(row) {
      console.log(row)
      this.paperId = row.id
      this.settleState = row.settleState
      this.dialogVisible = true
    },

    // 查看阅卷情况
    showDetail(row) {
      this.$router.push({ name: 'ReviewAuditDetail', query: { examId: row.examId, paperId: row.id, requireAudit: row.auditState !== -1 ? '1' : '0' }})
    },

    // 下拉操作项
    handleActions(event) {
      this.postForm.examId = this.listQuery.params.examId
      this.postForm.paperIds = event.ids

      if (event.opt === 'audit') {
        this.auditVisible = true
      }
      if (event.opt === 'settle') {
        this.settleVisible = true
      }
    },

    handleAuditAll() {
      this.postForm.examId = this.listQuery.params.examId
      this.postForm.paperIds = []
      this.auditVisible = true
    },
    handleSettleAll() {
      this.postForm.examId = this.listQuery.params.examId
      this.postForm.paperIds = []
      this.settleVisible = true
    },

    reloadGrid() {
      this.$refs.pagingTable.getList()
    }
  }
}
</script>

<style scoped>
.el-form-item {
  margin-bottom: 0;
}
</style>
